<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/jdbc">
<head xmlns:th="http://www.thymeleaf.org" th:include="master::head">
    <title>发布任务</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="portlet-body form">
                <form id="taskForm" action="publishTask" method="post">
                    <div class="form-body">
                        <div class="form-group">
                            <input type="text" class="form-control" id="pageUrl" name="pageUrl" required="required"
                                   value="" placeholder="请输入任务URL"/>
                            <button type="button" id="btn_testMatch" class="btn green">测试匹配</button>
                        </div>
                        <div class="form-group">
                            <label class="control-label">请求方式</label>
                            <select id="requestMethod" name="method" class="bootstrap-select bs-select"
                                    required="required">
                                <option value="GET" selected="selected">get方式</option>
                                <option value="POST">post方式</option>
                                <option value="PUT">put方式</option>
                                <option value="DELETE">delete方式</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label">请求参数（JSON）</label>
                            <ul>
                                <li>
                                    1、分页:"$pagination_分页参数名:{START(开始页码),END(结束页码),STEP(步数)}"。例：$pagination_p:{'START':'1','END':'100','STEP':'1'}
                                </li>
                                <li>2、批量查询:"$array_批量参数名:['xxx','yyy','zzz']"。例：$array_name:['11','12','13','14','15']
                                </li>
                            </ul>

                            <div class="row">
                                <!--<div class="col-md-4">-->
                                <!--</div>-->
                                <div class="col-md-12">
                                    <table id="tb_task"></table>
                                </div>
                            </div>
                            <textarea id="urlParamsJson" name="urlParamsJson" class="form-control " rows="3" value=""
                                      placeholder="{&quot;$pagination_p&quot;:{'START':'1','END':'100','STEP':'1'},&quot;$array_name&quot;:['11','12','13','14','15']} "></textarea>
                        </div>

                        <div class="form-group">
                            <label class="control-label">参数文件上传</label>
                            <!--<form action="uploadFile" id="uploadFileForm" enctype="multipart/form-data" method="post">-->
                            <div class="input-group">
                                <input type="file" value="" id="filekey" autocomplete="off" name="files"
                                       class="form-control input-lg" />
                                <span>上传符合格式的Excel文件,CSV文件,TXT文件:</span>
                                <span class="input-group-btn">
                                  <button id="btn_file" type="button" class="button btn btn-danger btn-lg" value="解析文件"
                                          style="margin-left: 2px;margin-top: -23px;">解析文件
                                  </button>
                                  </span>
                            </div>
                            <!--</form>-->
                        </div>


                        <div class="form-group">
                            <label>任务类型</label>
                            <div class="checkbox-list">
                                <label class="checkbox-inline">
                                    <input type="radio" name="jobType" value="once" checked="checked"/>单次任务</label>
                                <label class="checkbox-inline">
                                    <input type="radio" name="jobType" value="regular"/>定时任务 </label>
                            </div>
                        </div>
                        <div class="form-group" id="jobInfoDiv"></div>
                        <div class="form-actions right">
                            <!--<button type="button" class="btn default">Cancel</button>-->
                            <button type="submit" class="btn green">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

<script th:inline="javascript">
    /*<![CDATA[*/
    $(function () {
        var paramList;
        $("#btn_file").click(function () {
            debugger
            var data = new FormData($('#taskForm')[0]);
            $.ajax({
                type: "POST",
                url: global.contextPath + "/uploadFile",
                cache: false,
                async: false,
                data: data,
                processData: false,
                contentType: false,
                success: function (result) {     //回调函数，result，返回值
                    debugger
                    paramList = result.data;
                    $('#tb_task').bootstrapTable($.extend(global.bootstrapTableOptions, {
                                method: 'get',                      //请求方式（*）
                                detailView: false,                   //是否显示父子表
                                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                                showRefresh: true,
                                data: result.data,
                                columns: result.columns
                            }
                    ));
                },
                error: function (msg) {
                    console.log(msg)
                }
            });
            return false; //此处必须返回false，阻止常规的form提交
        });
        //1.初始化Table
        $(":radio").click(function () {
            if ("regular" === $(this).val())
                $("#jobInfoDiv").load(global.contextPath + "/addScheduleJob?random=" + Math.random());
            else $("#jobInfoDiv").empty();
        });


        $('#taskForm').submit(function () {
            var form = $(this);
            var data = {};
            form.serializeArray().map(function (x) {
                data[x.name] = x.value;
            });
            data.paramList = paramList;
            $.ajax({
                type: "Post",
                cache: false,
                contentType: "application/json",
                url: form.attr("action"),
                data: JSON.stringify(data),
                dataType: 'json',
                success: function (result) {     //回调函数，result，返回值
                    alert(result == true ? "提交成功" : "发布失败");
                },
                error: function (msg) {
                    alert(msg);
                }
            });
            return false; //此处必须返回false，阻止常规的form提交
        });


        $("#btn_testMatch").click(function () {
            var pageUrl = $("#pageUrl").val();
            if (!pageUrl) alert("pageUrl不能为空！");

            $.ajax({
                type: "post",
                cache: false,
                contentType: "application/json",
                url: global.contextPath + "/testPageUrlMatchRegex?random=" + Math.random(),
                data: pageUrl,
                dataType: 'json',
                success: function (result) {     //回调函数，result，返回值
                    debugger
                    alert(JSON.stringify(result, null, "\t"));
                },
                error: function (msg) {
                    if (msg.status == 200) alert("没有查询到数据！");
                    else
                        alert("测试出现异常！");
                }
            });
            return false;
        });
    });

    /*]]>*/
</script>

</body>
</html>